<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Web前端相关笔记</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../lib/animatecss/animate.min.css">
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.clockjs"></script>
    <script src="../lib/respond/respond.clockjs"></script>
    <![endif]-->

    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.js"></script>
    <script src="../lib/angular/angular.js"></script>
    <script src="../lib/angular/angular-ui-router.js"></script>

    <!--<link rel="stylesheet" href="../css/index.css">-->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/note_book.css">
    <link rel="stylesheet" href="../css/login_regsiter.css">
</head>
<body ng-app="s1.app">
<div id="note-book" class="note-book">
    <!--导航栏-->

    <nav class="navbar navbar-common">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="home.html">home</a></li>
                    <li><a href="#">归档</a></li>
                    <li><a href="#">标签</a></li>
                    <li><a href="#">分类</a></li>
                    <li class="active"><a href="note_book.html">笔记</a></li>
                </ul>
                <form class="navbar-form navbar-left hidden-sm" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="JavaScript高级程序设计">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">关于</a></li>
                    <li><a href="message/message.html">留言</a></li>
                    <li><a href="javascript:;" id="wrap">注册</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">php</a></li>
                            <li><a href="#">java</a></li>
                            <li><a href="#">c</a></li>
                            <li><a href="#">c++</a></li>
                            <li class="divider"></li>
                            <li><a href="#">继续了解</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <!--3D轮播-->
    <div class="threeDSlide" id="threeDSlide">
        <ul id="slideSpan">
        </ul>
        <a href="javascript:;" class="prev" id="prev">&lt;</a>
        <a href="javascript:;" class="next" id="next">&gt;</a>
    </div>

    <!--person-->
    <div class="personality slide" id="personality">
        <div class="myself">
            <a href="javascript:;" class="log" id="loginer">登录</a>
            <div class="intrude-less">
                <header id="header" class="inner">
                    <a href="#" class="profilepic">
                        <img src="../images/home/psu.jpg" id="js-avatar" title="逛一逛">
                    </a>

                    <hgroup>
                        <h2 class="header-author"><a href="#">李双意</a></h2>
                    </hgroup>

                    <p class="header-subtitle">一直在前端路上，从未停止过脚步。</p>

                    <form>
                        <input type="text" class="st-default-search-input search" id="search" placeholder=" Search...">
                    </form>

                    <div id="switch-area" class="switch-area">
                        <div class="switch-wrap">
                            <section class="switch-part switch-part1">
                                <nav class="header-menu">
                                    <ul>
                                        <li><a href="/">博客首页</a></li>

                                        <li><a href="/works">作品展示</a></li>

                                        <li><a href="/about">留言打卡</a></li>

                                        <li><a href="/FrontEndGuide">前端导航</a></li>
                                    </ul>
                                </nav>
                                <nav class="header-nav">
                                    <ul class="social">

                                        <a class="fl mail" target="_blank" href="#" title="mail">mail</a>

                                        <a class="fl github" target="_blank" href="#" title="github">github</a>

                                        <a class="fl zhihu" target="_blank" href="#" title="zhihu">zhihu</a>

                                        <a class="fl weibo" target="_blank" href="#" title="weibo">weibo</a>

                                        <a class="fl google" target="_blank" href="#" title="google">google</a>

                                        <a class="fl twitter" target="_blank" href="#" title="twitter">twitter</a>

                                        <a class="fl facebook" target="_blank" href="#" title="facebook">facebook</a>

                                        <a class="fl rss" target="_blank" href="#" title="rss">rss</a>

                                    </ul>
                                </nav>
                            </section>
                        </div>

                    </div>
                </header>
            </div>
        </div>
    </div>
    <div class="web-note-book" id="web-note-book">
        <div class="container">
            <div class="col-md-3 hidden-sm hidden-xs">
                <ul class="main-nav" id="main-nav">
                    <li class="panel selected"><a href="javascript:;" class="docs-home active">Web前端相关笔记</a></li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">Html</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="html5_a">h5新增属性、方法</a></li>
                            <li class="toc-item"><a ui-sref="html5_b">h5特性</a></li>
                            <li class="toc-item"><a ui-sref="html5_c">h5的新方向</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">CSS</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="css_a">css1</a></li>
                            <li class="toc-item"><a ui-sref="css_a">css2</a></li>
                            <li class="toc-item"><a ui-sref="css_a">css3</a></li>
                            </li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">JavaScript</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="javascript_s">Array和String常用方法</a></li>
                            <li class="toc-item"><a ui-sref="javascript_z">javascript一般方法</a></li>
                            <li class="toc-item"><a ui-sref="javascript_b">javascript事件</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">jQuery</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="jQuery_a">jQuery基本使用</a></li>
                            <li class="toc-item"><a ui-sref="jQuery_b">jQuery技能提升</a></li>
                            <li class="toc-item"><a ui-sref="jQuery_c">jQuery性能优化</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">Canvas</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="Canvas_a">Canvas绘制基础</a></li>
                            <li class="toc-item"><a ui-sref="Canvas_b">Canvas基本图形</a></li>
                            <li class="toc-item"><a ui-sref="Canvas_c">Canvas绘制动画</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area ">JavaScript面向对象</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="opp_a">原型属性</a></li>
                            <li class="toc-item"><a ui-sref="opp_b">原型链继承</a></li>
                            <li class="toc-item"><a ui-sref="opp_c">prototype</a></li>
                            <li class="toc-item"><a ui-sref="opp_d">Function属性</a></li>
                            <li class="toc-item"><a ui-sref="opp_e">闭包、缓存</a></li>
                            <li class="toc-item"><a ui-sref="opp_f">封装框架</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">AngularJs</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="angular_a">AngularJs1</a></li>
                            <li class="toc-item"><a ui-sref="angular_b">AngularJs2</a></li>
                            <li class="toc-item"><a ui-sref="angular_c">AngularJs3</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">Vue</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="vue_a">VueJs1</a></li>
                            <li class="toc-item"><a ui-sref="vue_b">VueJs2</a></li>
                            <li class="toc-item"><a ui-sref="vue_c">VueJs3</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">React</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="react_a">React1</a></li>
                            <li class="toc-item"><a ui-sref="react_b">React2</a></li>
                            <li class="toc-item"><a ui-sref="react_c">React3</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">NodeJs</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="nodejs_a">Nodejs1</a></li>
                            <li class="toc-item"><a ui-sref="nodejs_b">Nodejs2</a></li>
                            <li class="toc-item"><a ui-sref="nodejs_c">Nodejs3</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">ES5、ES6</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="es5_a">ES5</a></li>
                            <li class="toc-item"><a ui-sref="es6_a">ES6</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">兼容处理</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="ecma_a">兼容处理1</a></li>
                            <li class="toc-item"><a ui-sref="ecma_b">兼容处理2</a></li>
                            <li class="toc-item"><a ui-sref="ecma_c">兼容处理3</a></li>
                        </ul>
                    </li>
                    <li class="panel collapsed">
                        <a href="javascript:;" class="area">框架处理</a>
                        <ul class="collapse">
                            <li class="toc-item"><a ui-sref="kj_a">兼容、检测</a></li>
                            <li class="toc-item"><a ui-sref="kj_b">each、this、RegExp</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-md-9 col-xs-12 col-sm-12">
                <div ui-view></div>
            </div>
        </div>
    </div>

    <!--login-->
    <div class="loginer" id="mustLogin">
        <span class="glyphicon glyphicon-remove right" id="loginDele"></span>
        <div id="loginDraw">
            <div class="photo" id="photo">
            </div>
            <span>会员登录</span>
        </div>
        <form action="" id="login-form">
            <div id="u" class="form-group">
                <input id="username" spellcheck=false class="form-control" name="username" type="text" size="18" alt="login" required="">
                <span id="logSuccee"></span>
                <span class="form-highlight"></span>
                <span class="form-bar"></span>
                <label for="username" class="float-label">手机号/邮箱</label>
                <div class="error-u">
                    邮箱不能为空
                </div>
            </div>
            <div id="p" class="form-group">
                <input id="password" class="form-control" spellcheck=false name="password" type="password" size="18" alt="login" required="">
                <span class="form-highlight"></span>
                <span class="form-bar"></span>
                <label for="password" class="float-label">密码</label>
                <div class="error-p">
                    密码不能为空
                </div>
            </div>
            <div class="form-group">
                <input type="checkbox" id="rem">
                <label for="rem">记住密码</label>
                <button id="submit" type="submit" name="button"  ripple>登录</button>
            </div>
            <div class="form_reg_btn">
                <span>还没有帐号？</span><a href="javascript:;" id="nowWrap">马上注册</a>
            </div>
        </form>
        <div class="other_login">
            <div class="left other_left">
                <span>其它登录方式</span>
            </div>
            <div class="right other_right">
                <a href="#">QQ登录</a>
                <a href="#">微信登录</a>
                <a href="#">微博登录</a>
            </div>
        </div>
    </div>

    <!--regsiter-->
    <div class="wrap login_wrap" id="regsiter">
        <span class="glyphicon glyphicon-remove right" id="regsiterDele"></span>
        <div class="content">
            <div class="logo"></div>
            <div class="login_box">
                <div class="login_form">
                    <div class="login_title" id="login_title">
                        注册
                    </div>
                    <div id="ue">
                        <form action="" method="post">

                            <div class="form_text_ipt">
                                <input name="username" type="text" placeholder="手机号/邮箱" id="regMob">
                            </div>
                            <span class="regSuccee" id="regstyle"></span>
                            <div class="ececk_warning"><span>数据不能为空</span></div>
                            <div class="form_text_ipt">
                                <input name="password" type="password" id="psw1" placeholder="密码">
                            </div>
                            <div class="ececk_warning"><span>数据不能为空</span></div>
                            <div class="form_text_ipt">
                                <input name="repassword" type="password" id="psw2" placeholder="重复密码">
                            </div>
                            <span class="resetSuccee" id="resetstyle"></span>
                            <div class="ececk_warning"><span>数据不能为空</span></div>
                            <!--<div class="form_text_ipt">
                                <input name="code" type="text" placeholder="验证码">
                            </div>
                            <div class="ececk_warning"><span>数据不能为空</span></div>-->

                            <div class="form_btn">
                                <button type="submit"  name="button" value="button" id="regsitBtn">注册</button>
                            </div>
                            <div class="form_reg_btn">
                                <span>已有帐号？</span><a href="javascript:;" id="nowLogin">马上登录</a>
                            </div>
                        </form>
                    </div>

                    <div class="other_login">
                        <div class="left other_left">
                            <span>其它登录方式</span>
                        </div>
                        <div class="right other_right">
                            <a href="#">QQ登录</a>
                            <a href="#">微信登录</a>
                            <a href="#">微博登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="addButton"></div>
    <div id="floating"></div>
</div>


<script src="../js/common.js"></script>
<script src="../js/note_book_angular.js"></script>
<script src="../js/login_regster.js"></script>
<script src="../js/canvas-nest.js-master/canvas-nest.min.js" color="0,0,225" opacity="0.5" count="99"></script>


<!--Flash人形时钟：放在页面底部，加快vue.js的解析速度-->
<div style="position:fixed; top:45px; right:10px;" class="hidden-xs">
    <script type="text/javascript" src="clockjs/flash-clock/clock.js"></script>
</div>

</body>
</html>
